import { Modal, Button, App, Form, Input, Space, Badge } from 'antd'
import './WithdrawalRecordDetails.less'
import { useModel } from '@umijs/max'
import { useState, useEffect } from 'react'
const { TextArea } = Input
import UploadImgList from '@/components/UploadImgList'

const AgentSettlementDetails = ({ setIsModalOpen, isModalOpen, currentDetailsObj, tableRef }) => {
  const { GetWithdrawDetail } = useModel('Agent')
  const { modal, message } = App.useApp()
  const [voucherForm] = Form.useForm()

  const [formInitValue, setFormInitValue] = useState({})

  // 当前结算详情
  const [currentVoucher, setCurrentVoucher] = useState({})

  // 查看详情
  const [isCheckDetails, setIsCheckDetails] = useState(false)

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  useEffect(() => {
    getSettlementDetails()
    if (currentDetailsObj.status == 3 || currentDetailsObj.status == -1) {
      setIsCheckDetails(true)
    } else {
      setIsCheckDetails(false)
      setFormInitValue({})
      setTimeout(() => {
        voucherForm.resetFields()
      }, 100)
    }
  }, [currentDetailsObj])

  // 获取结算详情
  const getSettlementDetails = async () => {
    setCurrentVoucher(currentDetailsObj)
    setFormInitValue({
      payment_voucher: currentDetailsObj.payment_voucher,
      remarks: currentDetailsObj.remarks
    })
    setTimeout(() => {
      voucherForm.resetFields()
    }, 100)
  }

  const normFile = e => {
    if (e && e.length) {
      let arr = []
      e.forEach(item => {
        if (item.value) {
          arr.push(item.value)
        } else {
          return []
        }
      })

      return arr
    } else {
      return []
    }
  }

  return (
    <Modal
      style={{ top: 20 }}
      destroyOnClose
      onCancel={handleCancel}
      className='settlement_details'
      title={currentDetailsObj.detailsTitle}
      open={isModalOpen}
      footer={[
        <Button key='close' onClick={handleCancel}>
          关闭
        </Button>
      ]}
    >
      <div className='settlement_info'>
        <div className='settlement_title'>提现信息</div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>发起金额（元）</div>
          <div className='settlement_info_item_value' style={{ color: '#165DFF' }}>
            {currentVoucher.withdraw_amount}
          </div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>状态</div>
          <div className='settlement_info_item_value'>
            <Badge status={currentDetailsObj.statusType} />
            <span>{currentDetailsObj.status_desc}</span>
          </div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>合伙人</div>
          <div className='settlement_info_item_value'>{currentVoucher.agent_name}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>剩余可提现（元）</div>
          <div className='settlement_info_item_value'>{currentVoucher.total_surplus_withdraw_amount}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>账户类型</div>
          <div className='settlement_info_item_value'>{currentVoucher.withdraw_type_desc}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>收款账户</div>
          <div className='settlement_info_item_value'>{currentVoucher.collection_account}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>收款人姓名</div>
          <div className='settlement_info_item_value'>{currentVoucher.collection_name}</div>
        </div>

        <div className='settlement_info_item'>
          <div className='settlement_info_item_label'>申请时间</div>
          <div className='settlement_info_item_value'>{currentVoucher.apply_time}</div>
        </div>

        {isCheckDetails && (
          <>
            <div className='settlement_info_item'>
              <div className='settlement_info_item_label'>操作人</div>
              <div className='settlement_info_item_value'>{currentVoucher.op_name}</div>
            </div>

            <div className='settlement_info_item'>
              <div className='settlement_info_item_label'>操作时间</div>
              <div className='settlement_info_item_value'>{currentVoucher.op_time}</div>
            </div>

            <div className='settlement_info_item'>
              <div className='settlement_info_item_label'>交易流水号</div>
              <div className='settlement_info_item_value'>{currentVoucher.out_trade_no}</div>
            </div>
          </>
        )}
      </div>

      <Form preserve={false} form={voucherForm} name='voucherForm' layout='vertical' initialValues={formInitValue}>
        <Form.Item
          name='payment_voucher'
          label='处理凭证'
          rules={[{ required: true, message: '请上传处理凭证' }]}
          getValueFromEvent={normFile}
        >
          <UploadImgList isCheckDetails={isCheckDetails} />
        </Form.Item>

        <Form.Item name='remarks' label='备注' rules={[{ required: true, message: '请输入备注' }]}>
          <TextArea disabled={isCheckDetails} rows={4} placeholder='请输入备注' allowClear />
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default AgentSettlementDetails
